<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <!-- css -->
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper.min.css">
    <link rel="stylesheet" href="../css/details.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_1897424_i0kcutyrxaq.css">
</head>

<body>
    <!-- html -->
    <!-- header 头************************************** -->
    <div id="header"></div>

    <!-- content 内容***********************************-->
    <div class="contents container-fluid">
        <div class="content container1">
            <!-- 首页 -->
            <ul class="content-nav">
                <li>首页<i class="iconfont iconfanhui-copy-copy"></i></li>
                <li>品牌<i class="iconfont iconfanhui-copy-copy"></i></li>
                <li>Chantecaille<i class="iconfont iconfanhui-copy-copy"></i></li>
                <li>香缇卡 钻石面膜50ml<i class="iconfont iconfanhui-copy-copy"></i></li>
            </ul>

            <!-- 购买buy -->
            <div class="amplify container1">
                <!-- 放大镜-左边 -->
                <div class="amplify-box">
                    <!-- swiper -->
                    <div class="list swiper-container">

                        <ul class="swiper-wrapper swiper-ul">
                            <li class="swiper-slide" style="height:95px;"><img
                                    src="http://qiniu.shjinjia.com.cn/58c211ff9bedc43916000395.jpg" alt=""></li>
                            <li class="swiper-slide"><img
                                    src="http://qiniu.shjinjia.com.cn/58c211fe3f8f9056a7000426.jpg" alt=""></li>
                            <li class="swiper-slide"><img src="http://qiniu.shjinjia.com.cn/1531304284559.jpg" alt="">
                            </li>
                            <li class="swiper-slide" style="margin-bottom:0;"><img
                                    src="http://qiniu.shjinjia.com.cn/1531304284559.jpg1531304285115.jpg" alt=""></li>
                        </ul>
                        <!-- Add Arrows 三角-->
                        <div class="triangle swiper-button-next"><i class="iconfont iconxiangxiadejiantou"></i></div>
                        <!-- <div class="swiper-button-next clearfix"><i class="iconfont iconxiangxiadejiantou"></i></div> -->
                    </div>
                    <!-- show -->
                    <div class="show">
                        <img src="https://qiniu.shjinjia.com.cn/1563854575289.jpg" alt="">
                        <div class="mask"></div>
                    </div>
                    <!-- glass -->
                    <div class="glass"></div>
                </div>
                <!-- 放大镜-右边 -->
                <div class="amplify-info">
                    <p>Bioxidea</p>
                    <p>24小时奇迹修复高级手膜 15g*3片Miracle24 Haute Skin Care for Hands</p>
                    <div>
                        <p><i class="iconfont iconrenminbi1688"></i>398.00</p>
                        <span>含税</span>
                        <span>156人已购买</span>
                        <span>
                            <a href="">请登录</a>
                            <!-- 会员价 <i class="iconfont iconrenminbi1688"></i>398.00 -->
                            查看会员价
                        </span>
                    </div>
                    <div>
                        <p>数量</p>
                        <div>
                            <i>-</i>
                            <input  class="minus"type="text" value="1" name="inNum">
                            <i class="add">+</i>
                        </div>
                        <p>5人收藏</p>
                    </div>
                    <div>
                        <p>立即购买</p>
                        <p class="addCar">加入购物车</p>
                        <p><img src="https://aromonde.com/images/collect-null.png" alt="">收藏</p>
                    </div>
                </div>
            </div>


            <!-- share -->
            <div class="content-share">
                <span>分享</span>
                <i class="iconfont iconweibo"></i>
                <i class="iconfont iconkoukou"></i>
                <i class="iconfont iconweixin"></i>
            </div>

            <!-- declare -->
            <div class="content-declare">
                <p><i class="iconfont iconhangtiantubiao-"></i>全球精品</p>
                <p><i class="iconfont iconbaoshuicang"></i>保税直发</p>
                <p><i class="iconfont iconguanfangbanben"></i>官方授权</p>
                <p><i class="iconfont iconshouquanzhengpin"></i>正品保证</p>
            </div>

            <!-- more -->
            <div class="content-message">
                <!-- 左 -->
                <div class="message-change">
                    <!-- 上 -->
                    <div class="change-top">
                        <p>
                            <span>猜你喜欢</span>
                            <span class="change-like">换一换</span>
                        </p>
                        <ul class="message-matter">
                            <!-- li -->
                            <li>
                                <img src="https://qiniu.shjinjia.com.cn/1591855503986.jpg" alt="">
                                <div>
                                    <p>Philip B</p>
                                    <p>皇家琥珀护发素60ml</p>
                                    <p>
                                        <span><i class="iconfont iconrenminbi1688"></i>448.00</span>
                                        <img src="https://aromonde.com/images/add-cart-btn.png" alt="">
                                    </p>
                                </div>
                            </li>
                           
                        </ul>
                    </div>
                    <!-- 下 -->
                    <div class="change-down">
                        <p>
                            <span>商品分类</span>

                        </p>
                        <ul class="message-text">
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532659943355.png" alt="">
                                <span>头发洗护</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532659962795.png" alt="">
                                <span>身体洗护</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532659970131.png" alt="">
                                <span>面部洗护</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532659977173.png" alt="">
                                <span>母婴洗护</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532660020011.png" alt="">
                                <span>室内香氛</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532660027258.png" alt="">
                                <span>居家清洁</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532660032987.png" alt="">
                                <span>寝浴用品</span>
                            </li>
                            <li>
                                <img src="http://qiniu.shjinjia.com.cn/1532660040877.png" alt="">
                                <span>仪器用具</span>
                            </li>
                            <!-- li -->
                            <li>
                                <span>查看所有品牌</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <!-- 右 -->
                <div class="message-tabs">
                    <!--  -->
                    <ul class="tabs-title">
                        <li class="active">商品详情</li>
                        <li>品牌故事</li>
                        <li>馥境笔记</li>
                        <li>商品评价</li>
                    </ul>
                    <!--  -->
                    <ul class="tabs-module">
                        <li>商品详情</li>
                        <li>品牌故事</li>
                        <li>馥境笔记</li>
                        <li>商品评价</li>
                    </ul>
                </div>
            </div>

        </div>
    </div>


    <!-- footer 尾 *************************************-->
    <div id="footer"></div>



    <!-- js *************************************************************************************-->
    <script src="../lib/jquery-1.11.0.js"></script>
    <script src="../js/swiper.min.js"></script>
    <!-- 放大镜 外部js -->
    <script src="../js/amplify.js"></script>
    <script src="../js/details.js"></script>
    <script>
        $("#header").load('./header.html');
    $('#footer').load('./footer.html');
        // 楼梯
        $('.tabs-title>li').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
        });

        $(".message-tabs li").click(function () {
          var index = $(this).index();
          /* $(window).scrollTop($("#content li").eq(index).offset().top); */
          $("html,body").animate(
            {
              scrollTop: $(".tabs-module li").eq(index).offset().top,
            }
          );
          $(this).addClass('active').siblings().removeClass('active');
        });

    
    </script>
</body>

</html>